<template>
  <div id="mySelf" v-loading="useStore.loading">
    <div class="back">
      <div class="back-content right-content" @click="$router.back()">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </div>
      <div class="back-title">个人信息</div>
    </div>

    <div class="content" v-if="!useStore.loading">
      <div class="user-info">
        <div class="avatar"><img :src="userInfo.avatar" alt="" /></div>
        <div class="info">
          <div class="info-main">
            <span class="info-title">姓名：</span>
            <span class="info-content">{{ userInfo.name || '-' }}</span>
          </div>
          <div class="info-main">
            <span class="info-title">年龄：</span>
            <span class="info-content">{{ userInfo.age || '-' }}</span>
          </div>
          <div class="info-main">
            <span class="info-title">邮箱：</span>
            <span class="info-content">{{ userInfo.email || '-' }}</span>
          </div>
          <div class="info-main">
            <span class="info-title">性别： </span>
            <span class="info-content">{{ userInfo.sex || '-' }}</span>
          </div>
          <div class="info-main">
            <span class="info-title">学历：</span>
            <span class="info-content">{{ userInfo.education || '-' }}</span>
          </div>
          <div class="info-main">
            <span class="info-title">毕业院校：</span>
            <span class="info-content">{{ userInfo.grad_school || '-' }}</span>
          </div>
          <div class="info-main" v-if="userInfo.duration">
            <span class="info-title"
              >{{ userInfo.duration.type || '行业' }}：</span
            >
            <span class="info-content"
              >{{ userInfo.duration.time || '-' }} 年</span
            >
          </div>
        </div>
        <div class="own-review" v-if="userInfo.self_intro">
          {{ userInfo.self_intro }}
        </div>
        <div class="own-review" v-else>
          <el-empty description="暂未填写"></el-empty>
        </div>
      </div>
      <div class="skill-detail">
        <div>个人技能：</div>
        <ul v-if="userInfo.skill && userInfo.skill.length">
          <li v-for="skill in userInfo.skill" :key="skill">
            {{ skill.skill_detail }}
          </li>
        </ul>
        <div v-else>
          <el-empty description="暂未填写"></el-empty>
        </div>
      </div>
      <div class="experience">
        <div>工作经验：</div>
        <ul
          class="experience-list"
          v-if="userInfo.experience && userInfo.experience.length"
        >
          <li
            class="experience-item"
            v-for="experience in userInfo.experience"
            :key="experience"
          >
            <div class="name">
              <span>项目名称：</span> {{ experience.title }}
            </div>
            <div class="time"><span>时间：</span> {{ experience.time }}</div>
            <div class="skill">
              <span>技能：</span>
              <div>
                <el-tag
                  class="skill-tag"
                  type="warning"
                  v-for="skill in experience.use_skill"
                  :key="skill"
                  >{{ skill }}
                </el-tag>
              </div>
            </div>
            <div class="responsible">
              <span>负责工作：</span>
              <ul>
                <li v-for="job in experience.res_job" :key="job">{{ job }}</li>
              </ul>
            </div>
          </li>
        </ul>
        <div v-else>
          <el-empty description="暂未填写"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMainStore } from '/@/store'
import { useRoute } from 'vue-router'
import { getUser } from '/@/api/api'

const useStore = useMainStore()
const userInfo: any = ref({})
const route = useRoute()
const getWebMaster = async () => {
  useStore.setLoading(true)
  const res = await getUser({ name: route.query.uid }).finally(() => {
    useStore.setLoading(false)
  })

  if (res.code === 1) {
    userInfo.value = res.data
  }
}
getWebMaster()
</script>

<style lang="less" scoped>
#mySelf {
  .content {
    .user-info {
      padding: 20px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;

      .avatar {
        width: 150px;
        height: 150px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        margin-left: 30px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          background: #ccc;
          top: 50%;
          right: -40px;
          height: 80px;
          width: 2px;
          border-radius: 10px;
          transform: translateY(-50%);
        }

        .info-main {
          margin-bottom: 10px;
          font-size: 14px;

          .info-title {
            display: inline-block;
            width: 80px;
            font-weight: bold;
            letter-spacing: 2px;
          }

          .info-content {
            margin-left: 10px;
          }
        }
      }

      .own-review {
        flex: 1;
        margin-left: 70px;
        line-height: 30px;
        font-size: 14px;
        text-indent: 2em;
      }
    }

    .skill-detail,
    .experience {
      display: flex;
      padding: 20px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #eee;

      > ul {
        margin-left: 30px;
      }

      > div {
        letter-spacing: 2px;
        font-weight: bold;
      }
    }

    .experience {
      .skill {
        display: flex;

        .skill-tag {
          margin-right: 10px;
        }
      }

      .experience-list {
        flex: 1;
        padding-bottom: 10px;
      }

      .experience-item {
        padding: 10px;
        box-shadow: 0 0 5px #ccc;
        margin-bottom: 10px;

        > div > span {
          display: inline-block;
          width: 80px;
        }
      }

      .responsible {
        flex: 1;
      }
    }
  }
}
</style>
